<template>
  <div>
    <div class="lists-top">
      <search @searchOrder="searchOrder"></search>
      <lists-nav :curType="status"
                 @changeOrderType="changeOrderType"></lists-nav>
    </div>
    <div class="lists-container">
      <div class="lists-wrapper">
        <div class="user-list"
             v-show="list.length">
          <van-list v-model="loading"
                    :finished="finished"
                    :error.sync="error"
                    error-text="请求失败，点击重新加载"
                    finished-text=""
                    @load="onLoad">
            <div class="order-box"
                 v-for="(listsItem,index) in list"
                 :key="index">
              <div class="dhs-virtual-icon"
                   v-if="listsItem.is_dhs_virtual==1"></div>
              <!-- 上面部分 -->
              <section class="order-list-info clearfix">
                <a href>
                  <span class="fl">
                    <p>订单：{{listsItem.order_no}}</p>
                    <p>日期：{{listsItem.create_time}}</p>
                  </span>
                  <span v-if="listsItem.status==3"
                        class="status fr completed"></span>
                  <span v-else-if="listsItem.status==4"
                        class="status fr orderClose"></span>
                  <span v-else
                        class="status fr"
                        :class="listsItem.is_presale?'red':''">{{listsItem.status_name}}</span>
                </a>
              </section>
              <!-- 中间部分 -->
              <section class="order-goods">
                <ul>
                  <li class="goods-li"
                      v-for='(subItem,idx) in listsItem.order'
                      :key="idx">
                    <section class="order-goods-img"
                             @click="JumpName('item-detail',{detailId:subItem.item_id})">
                      <img :src="subItem.pic_url"
                           width="80"
                           height="80" mode="scaleToFill"/>
                    </section>
                    <section class="order-goods-infor">
                      <div class="left">
                        <p class="goods-title"
                          @click="JumpName('item-detail',{detailId:subItem.item_id})">{{subItem.title}}</p>
                        <p class="goods-props"
                          v-if="subItem.props">{{subItem.props}}</p>
                          <p class="price fl fontGilroy"
                           v-if="display_user_supplier_price==1">
                          {{subItem.pay_type && subItem.pay_type==5?'&dollar;':'&yen;'}}<em>{{subItem.current_price}}</em></p>
                        <p class="price fl fontGilroy"
                           v-else>
                          <span>供货价：</span>
                          {{subItem.pay_type && subItem.pay_type==5?'&dollar;':'&yen;'}}<em>{{subItem.supplier_cost_price}}</em></p>
                      </div>
                      <section class="right">
                        <span class="num fr"><i>x</i>{{subItem.num}}</span>
                      </section>

                    </section>
                  </li>
                </ul>
                <p class="receiver_name"><span>收货人：</span>{{listsItem.receiver_name}}</p>
              </section>
              <section class="order-pay"
                       v-if="is_supplier_delivery==1 || is_gys_order_detail==1">
                <div class="good-more-btn">
                  <van-button hairline round class="btn details orange-btn" @click="JumpName('order-detail',{id:listsItem.order_id,page:listsItem.page,label_type:listsItem.type})">详情</van-button>
                </div>
              </section>
            </div>
          </van-list>
        </div>
        <div v-show="!list.length && finished">
          <no-data :noData="noData"></no-data>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import search from './components/search/index'
import listsNav from './components/listsNav/index'
import noData from '@/components/noData/index'
// import noOrderImg from '@img/no_order.png'
import Scroll from '@/components/scroll/index'
import { getListsGys } from '@/api/user/gys/gysApi'

import Vue from 'vue'
export default Vue.extend({
  name: 'index',
  components: {
    search,
    listsNav,
    Scroll,
    noData
  },
  data() {
    return {
      noData: {
        img: 'https://img.wifenxiao.com/h5-wfx/images/no_order.png',
        marginTop: '60px',
        text: '暂无订单'
      },
      status: 0,
      order_no: '',
      p: 2,
      loading: false,
      finished: false,
      error: false,
      display_user_supplier_price: 1,
      is_supplier_delivery: '0',
      is_gys_order_detail: '0',
      list: []
    }
  },
  created() {
    // 初始数据
    this.init()
  },
  methods: {
    init() {
      // 置空数据
      this.list = []
      this.p = 2
      this.loading = false
      this.finished = false
      this.error = false
      const data = {
        status: this.status,
        order_no: this.order_no
      }
      this.$loadingWrap.show()
      getListsGys(data).then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          this.display_user_supplier_price = res.data.display_user_supplier_price
          this.is_supplier_delivery = res.data.is_supplier_delivery
          this.is_gys_order_detail = res.data.is_gys_order_detail
          // 全部订单列表
          if (this.status == 0) {
            this.list = res.data.lists // 全部订单
          } else {
            this.list = res.data.lists_wait // 待发货订单
          }
          // 其它
          if (!this.list.length) {
            this.finished = true
          }
        } else {
          this.$Error(res.msg)
        }
      })
    },
    // 切换订单状态
    changeOrderType(type) {
      this.status = type
      this.init()
    },
    // 搜索订单
    searchOrder(orderNo) {
      this.order_no = orderNo
      if (this.order_no != '') {
        this.status = 0
      }
      this.init()
    },
    // 加载更多
    onLoad() {
      const data = {
        status: this.status,
        p: this.p
      }
      getListsGys(data)
        .then(res => {
          this.loading = false
          if (res.data.length) {
            this.list = this.list.concat(res.data)
            this.p++
          } else {
            this.finished = true
          }
        })
        .catch(() => {
          this.error = true
        })
    },
    JumpName(name, data) {
      this.$JumpName(this, name, data)
    },
    Jump(url, data) {
      this.$JumpPath(this, url, data)
    },
    /* // 跳转商品详情
    goItemDetail(url) {
      // console.log(url)
      window.location.href = url
    } */
  },
  mounted() {
    // 小程序触底加载更多
    window.addEventListener("reachbottom", () => {
      this.onLoad()
    })
  }
})
</script>

<style lang="scss">
@import "src/styles/order/lists";
.lists-container {
  padding:20px 25px;
  .order-goods {
    .goods-title {
      @include lineClamp(24px, 1.4, 1);
    }
    .price{
      color: #F30C23;
    }
    .receiver_name{
      font-size: 24px;
      color: #333;
      margin-top: 18px;
      >span{
        color: #999;
      }
    }
  }
  .good-total-price{
    color: #F30C23;
  }
}
</style>
